<!--
 - MineAdmin is committed to providing solutions for quickly building web applications
 - Please view the LICENSE file that was distributed with this source code,
 - For the full copyright and license information.
 - Thank you very much for using MineAdmin.
 -
 - @Author X.Mo<root@imoi.cn>
 - @Link   https://gitee.com/xmo/mineadmin-vue
-->
<template>
    <div class="ma-content-block lg:flex justify-between p-4">
      <!-- CRUD 组件 -->
      <ma-crud :options="crud" :columns="columns" ref="crudRef">
        <!-- 排序列 -->
        <template #sort="{ record }">
          <a-input-number
            :default-value="record.sort"
            mode="button"
            @change="changeSort($event, record.id)"
            :min="0"
            :max="1000"
          />
        </template>
        <!-- 状态列 -->
        <template #status="{ record }">
          <a-switch
            :checked-value="1"
            unchecked-value="2"
            @change="changeStatus($event, record.id)"
            :default-checked="record.status == 1"
          />
        </template>
  
        <template #operationBeforeExtend="{ record }">
          <a-link @click="openLeaderModal(record)" v-auth="['system:dept:getLeaderList']">领导列表</a-link>
        </template>
      </ma-crud>
  
      <leader-list ref="leaderRef" />
  
    </div>
  </template>
  
  <script setup>
    import { ref, reactive, onMounted } from 'vue'
    import dept from '@/api/system/dept'
    import { Message } from '@arco-design/web-vue'
    import LeaderList from '@/views/system/dept/leader.vue'
  
    const crudRef = ref()
    const leaderRef = ref()
  
    const changeStatus = async (status, id) => {
      const response = await dept.changeStatus({ id, status })
      if (response.success) {
        Message.success(response.message)
      }
    }
  
    const changeSort = async (value, id) => {
      const response = await dept.numberOperation({ id, numberName: 'sort', numberValue: value })
      if (response.success) {
        Message.success(response.message)
      }
    }
  
    const openLeaderModal = (record) => {
      leaderRef.value.open(record)
    }
  
    const crud = reactive({
      api: dept.getList,
      recycleApi: dept.getRecycleList,
      showIndex: false,
      pageLayout: 'fixed',
      rowSelection: { showCheckedAll: true },
      operationColumn: true,
      operationWidth: 220,
      add: { show: true, api: dept.save, auth: ['system:dept:save'] },
      edit: { show: true, api: dept.update, auth: ['system:dept:update'] },
      delete: {
        show: true,
        api: dept.deletes, auth: ['system:dept:delete'],
        realApi: dept.realDeletes, realAuth: ['system:dept:realDeletes']
      },
      recovery: { show: true, api: dept.recoverys, auth: ['system:dept:recovery']},
      isExpand: true,
      beforeRequest:((param)=>{
        param.type = 3
      })
    })
    const columns = reactive([
      { title: 'ID', dataIndex: 'id', addDisplay: false, editDisplay: false, width: 50, hide: true },
      {
        title: '上级部门', dataIndex: 'parent_id', hide: true, formType: 'tree-select', align:'center',
        dict: { url: 'system/dept/tree' },
        editDefaultValue: (record) => {
          return record.parent_id == 0 ? undefined : record.parent_id
        }
      },
      {
        title: '企业名称', dataIndex: 'name', search: true, width: 150,align:'center',
        commonRules: [{ required: true, message: '部门名称必填' }],
      },
      
      { title: '负责人', dataIndex: 'leader', search: true, align:'center',width: 120 },
      {
        title: '手机', dataIndex: 'phone', align:'center',search: true, width: 150,
        commonRules: [{ match: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: '请输入正确的手机号码' }]
      },
      
      {
        title: '排序', dataIndex: 'sort', align:'center',formType: 'input-number', addDefaultValue: 1, width: 180,
        min: 0, max: 1000
      },
      {
        title: '状态', dataIndex: 'status', align:'center',search: true, formType: 'radio',
        dict: { name: 'data_status', props: { label: 'title', value: 'key' } },
        addDefaultValue: '1', width: 120
      },
      {
        title: '备注', dataIndex: 'remark', align:'center',hide: true, formType: 'textarea',
      },
      {
        title: '创建时间', dataIndex: 'created_at', align:'center',addDisplay: false, editDisplay: false,
        search: true, formType: 'range', width: 180,
      },
    ])
  </script>
  
  <script>
  export default { name: 'system:peisong' }
  </script>
  
  <style scoped>
  
  </style>
  